<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.red{background: red;}
			.border{border: solid 10px green;}
			.txtC{color: yellow;font-size: 20px;}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 变量绑定、条件 -->
			<p v-bind:class="flag ? 'border' : 'txtC'">段落1</p>
			<!-- 对象绑定 -->
			<p v-bind:class="{red:a,border:b}">段落2</p>
			<!-- 数组绑定 -->
			<p v-bind:class="[cn,'txtC']">段落3</p>
		</div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
			
		new Vue({
			el:"#app",
			data:{
				cn:"red",
				flag:true,
				a:true,
				b:true
			}
		})
		
	</script>
</html>
